<template>
  <div>
    <div class="breadcrumb flex-center">
      <p class="title">意见反馈</p>
    </div>
    <div class="box" v-if="currType==1">
      <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 8 }" placeholder="请输入您要要反馈的内容（5~200字内）" v-model="ruleForm.desc" maxlength="200"
                show-word-limit></el-input>
      <!--  :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove" -->
      <p class="mgt-20">请提供相关的截图或照片（选填，最多支持4张）</p>
      <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" tip="(支持png.jpg格式，图片大小不超过5M),最多上传9张">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm mgt-20">
        <el-form-item label="联系方式：" prop="age" :rules="[{ required: true, message: '请填写您的联系方式' }]">
          <el-input type="number" v-model.number="ruleForm.age" autocomplete="off" placeholder="请填写您的联系方式" style="width: 200px" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div class="mgb-40 flex-center">
        <div v-if="1" class="btn focus">提交</div>
        <div v-if="0" class="btn">已关注</div>
      </div>
    </div>
    <div v-else class="content_ok">
      <img src="../../assets/img/success.png" alt="" class="success_img">
      <p class="text_ok">申请成功</p>
      <p class="info_text">感谢您的申请，我们会尽快给您联系，谢谢~</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: [],
      currType: 2,
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// @import "../assets/css/variable.less";
.btn {
  background-color: #cb3e3e;
  opacity: 0.5;
  border-radius: 4px;
  width: 220px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 34px;
  height: 34px;
  display: inline-block;
  &.focus {
    opacity: 1;
  }
}
.cover {
  width: 70px;
  height: 70px;
}
.box {
  background: #ffffff;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 6px 6px 6px 6px;
  padding: 20px;
  min-height: 400px;
}
.info_text {
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 14px;
}
.text_ok {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 12px;
}
.success_img {
  width: 100px;
  height: 100px;
}
.content_ok {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // border: 1px red solid;
  height: 288px;
}
</style>
